<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>vue</title>
		<script src="https://unpkg.com/vue@2.5.15/dist/vue.min.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	</head>
	<body>
		<div id="vue">
			<ul>
				<!--都会访问主页Home组件-->
				<router-link to="/home/haha">主页1</router-link>
				<router-link to="/home/hehe">主页2</router-link>
				<br />
				<!--都会跳转新闻News组件-->
    			<router-link to="/news/hou/music/jay">新闻1</router-link>
    			<router-link to="/news/haha/music/amei">新闻2</router-link>
			</ul>
			<div>
				<!-- 路由匹配到的组件将渲染在这里 -->
				<router-view></router-view>
			</div>
		</div>
	</body>
	<script type="application/javascript">
		//准备组件
		var App=Vue.extend();
		var Home=Vue.extend({
			template:'<h3>获取到数据{{$route.params.id}}</h3>',
			watch:{
				//可以简单地 watch（监测变化） $route 对象：
				/*to: 新点击的连接对象,from :原来的点击对象*/
				'$route':function(to,from){
					alert(to.path);
				}
			}
			/*
			 * 或者使用 2.2 中引入的 beforeRouteUpdate 守卫
			 beforeRouteUpdate:function (to, from, next) {
			 	alert(from.path);
			}
			*/
		});
		var News=Vue.extend({
			template:'<h3>获取到新闻参数:{{$route.params}}</h3>'
		});
		//定义路由,配置映射
		var router = new VueRouter({
		    routes: [
		      //动态路径参数以 :开头,//此时 /home/hah , /home/hehe等 都会跳转到Home组件
			  { path: '/home/:id', component: Home }, 
			  { path: '/news/:id/music/:name', component: News } //可配置多个动态路径
			]
		});
		//一个『路径参数』使用冒号 : 标记。当匹配到一个路由时，
		//参数值会被设置到 this.$route.params，可以在每个组件内使用
		// 获取参数{{$route.params.id}}  id是:后面的配置参数
		/*比如:
		      /home/haha  参数  :{ id: 'haha' }
		      /news/big/music/jay    参数:    {id:'big',name:'jay'}
		 * */
		//创建和挂载根实例,通过 router 配置参数注入路由，从而让整个应用都有路由功能
		var app = new Vue({
		  router:router
		}).$mount('#vue')
		// 现在，应用已经启动了！
	</script>
</html>
